<template>
	<view class="video_box" :style="{ '--color': vuex_config.themeColor1 }" v-if="dataForm.pk_id ? true : false">
		<!-- <image class="video_img" :src="$formatImg(dataForm.img)"  @click="previewImage($formatImg(dataForm.img))" mode=""></image> -->
		<sww-swipe indicatorDots autoplay preview :list="swipeList" />
		<view class="video-title-price">
			<view class="video-title u-line-1">{{ dataForm.name }}</view>
			<view class="price-box">
				<view class="video-price" style="margin-right: 15rpx;">￥{{ dataForm.price }}</view>
				<block v-if="vuex_user.type == 2 && dataForm.rebate > 0 && vuex_user.commission>0">
					<text class="u-font-25 sww-tp u-m-r-5">分享赚</text>
					<text class="u-font-20 sww-tp ">￥</text>
					<text class="u-font-25 sww-tp">{{ $rebateNum(dataForm.rebate, vuex_user.commission) }}</text>
				</block>
			</view>
		</view>
		<!-- 视频详情 -->
		<view class="video_details">
			<view class="video-d-i u-flex">
				<view class="v-d-name">热度</view>
				<view class="v-time">{{ dataForm.video_view }}</view>
			</view>
			<view class="video-d-i u-flex" v-if="dataForm.type_name">
				<view class="v-d-name">所属分类</view>
				<view class="v-time">{{ dataForm.type_name }}</view>
			</view>
			<view class="video-d-i u-flex">
				<view class="v-d-name">上传时间</view>
				<view class="v-time">{{ dataForm.date_creation }}</view>
			</view>
		</view>

		<!-- 视频目录 -->
		<view class="v-catalog-content">
			<view class="v-catalog" @click="onChange">
				<view class="v-d-name">视频目录</view>
				<view class="icon_live iconfont iconfont-e772"></view>
			</view>
			<view v-if="vDetails" class="v-catalog-box">
				<view class="v-catalog-item" v-for="(item, index) in dataForm.video_list" :key="index">
					<view class="video-d-i u-flex" @click="onLinVideoTo(item.url)">
						<view class="v-d-name">{{ item.name }}</view>
						<!-- <view class="v-time">→</view> -->
						<u-icon name="lock-fill" class="icon_stop" v-if="dataForm.order_count < 1"></u-icon>
						<view class="icon_live iconfont iconfont-e65c" v-else></view>
					</view>
				</view>
			</view>
			<view class="video-list">视频详情</view>
		</view>
		<u-parse :html="dataForm.details"></u-parse>
		<view class="bottom-box u-flex" v-if="dataForm.pk_id">
			<view :class="['bottom-box-item-left', 'flex-c-c', dataForm.order_count > 0 ? 'has_play' : '']"
				@click="ontryIt(!dataForm.video_list[0] ? '' : dataForm.video_list[0].url)">
				<view class="cart_icon iconfont iconfont-e65c"></view>
				<text>{{ dataForm.order_count < 1 ? '视频试播' : '立即播放' }}</text>
			</view>
			<view v-if="dataForm.order_count < 1" class="bottom-box-item-right flex-c-c" @click="onBuy()">
				<u-icon name="shopping-cart" class="bottom-img"></u-icon>
				<text>立即购买</text>
			</view>
		</view>
		<view class="bottom-line"></view>
		<sww-login></sww-login>
		<sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
				<u-popup v-model="showImg" mode='center'>
					<image class="show-img" :src="dataForm.adv_pic" mode="aspectFill"></image> 
				</u-popup>
	</view>
</template>
<script>
	import {
		uniModal,
		uniLinkTo,
		uniToast,
		uniHide
	} from '@/utils/uniPromise.js';
	import {
		payOrder
	} from '@/mixins/payOrder.js';
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		pageShare
	} from '@/mixins/pageShare';
	export default {
		mixins: [payOrder, pageShare, wxConfig],
		data() {
			return {
				vDetails: false,
				dataForm: {
					video_list: []
				},
				id: '',
				init: false,
				browTime: 0,
				showImg:false,
				swipeList: []
			};
		},

		onLoad(options) {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
			// #endif
			let {
				id
			} = options;
			this.id = id;
			if (id) {
				this.initPage(id);
				this.getBrowTime();
			}
		},
		onShow() {
			if (this.init) {
				uniHide();
				this.initPage(this.id);
			} else {
				this.init = true;
			}
		},
		onUnload() {
			if (this.browTime && this.$isLogin()) {
				this.addBrow(this.dataForm.pk_id);
			}
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		methods: {
			// 记录开始浏览时间
			getBrowTime() {
				this.browTime = new Date().getTime();
			},
			// 新增浏览记录
			addBrow(prodId) {
				let date = new Date();
				let duration = parseInt((date.getTime() - this.browTime) / 1000);
				date = formatDate(date, 'YYYY-MM-DD HH:mm:ss');
				this.$resPost('AddUsersBrowse', {
					type: 5,
					product_id: prodId,
					date_time: date,
					duration: duration
				}).catch(() => {});
			},
			checkLogin() {
				return this.$login('initPage', this.dataForm.pk_id);
			},
			initPage(pk_id) {
				this.$loading();
				this.$resPost('GetVideoInfo', {
						pk_id
					})
					.then(res => {
						if (!res.data.pk_id || res.data.status != 1) {
							return Promise.reject();
						}
						if (res.data.gobal_buyer && res.data.gobal_buyer != '0') {
							let bol = true
							if (!this.vuex_user.level || this.vuex_user.level == '0') {
								bol = false
							} else {
								let arr = res.data.gobal_buyer.split(',')
								bol = arr.some((item) => {
									return item == this.vuex_user.level
								})
							}
							if (!bol) {
								this.$hide()
								uni.showModal({
									content: "当前产品您没有查看权限",
									showCancel: false,
									confirmText: '我知道了',
									success: () => {
										this.uniBack()
									}
								})
								return
							}
						}
						if (res.data.img) {
							this.swipeList = res.data.img.split(',').map(el => {
								return {
									img: el
								};
							});
						}
						this.dataForm = {
							...res.data
						}

						this.customShareParams(); // 设置当前产品页的分享参数
						this.$hide();
					})
					.catch(() => {
						this.$hide();
						uniModal({
							title: '商品已下架',
							showCancel: false,
							confirmText: '我知道了'
						}).then(() => {
							this.uniBack();
						});
					});
			},
			// [这个函数名称不能变--pageShare.js]设置当前产品页的分享参数
			customShareParams() {
				if (!this.shareParams.title) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let curRoute = routes[routes.length - 1].route; //获取当前页面路由
					let curParam = routes[routes.length - 1].options; //获取路由参数
					let obj = this.swipeList.find(item => {
						return item.img;
					});
					this.shareParams = {
						title: this.dataForm.name,
						path: curRoute,
						query: curParam,
						imgUrl: obj && obj.img ? obj.img : ''
					};
					this.onShareByH5().then(() => {})
				}
			},
			//打开选择支付方式
			onBuy() {
				this.checkLogin().then(() => {
					if (this.dataForm.order_count > 0) {
						return this.$toast('视频已购买');
					}
					this.$refs.payCheck.open(this.dataForm.price);
				});
			},

			// 商品支付
			onPayPrice(e) {
				let pay_type = e.pay_type
				let dataForm = this.dataForm;
				let json = JSON.stringify([{
					// 商品信息
					fk_pro_id: dataForm.pk_id, //所属产品ID
					price: dataForm.price, //单价
					num: 1, //购买数量
					remark: dataForm.remark //备注
				}]);
				let params = {
					// business_account_id: this.vuex_business.appid, //商家appId
					business_appid: this.vuex_business.appid, //商家appId
					postage: 0, //邮费
					coupon_id: 0, //优惠卷
					name: this.vuex_user.name, //用户姓名
					mobile: this.vuex_user.mobile, //用户手机
					total_amount: dataForm.price, //总金额
					remark: '', //备注
					json_detailed: json
				};
				this._submitOrder(params, {
					pay_type,
					order_type: 5,
					router: '',
					orderApi: 'AddOrderVideo',
					redirectUrl:this.dataForm.adv_pic?'':'/package/order/list/index',
					totalPrice: dataForm.price, //总金额
					modal: false //不显示混入组件里面的支付提示模态框
				});
			},
			//支付成功的回调
			onOrderUptateSuccess() {
				if(this.dataForm.adv_pic){
					this.showImg = true
					this.initPage()
				}
			},
			/**
			 * 获取微信支付信息
			 * @returns {object}
			 */
			wxOrderPay(params) {
				return new Promise((resolve, reject) => {
					this.$resPost('GetCreateOrderPay', {
							...params
						})
						.then(res => {
							// console.log(res.data,111)
							if (res.data) {
								resolve(res.data);
								return;
							}
							return Promise.reject();
						})
						.catch(err => {
							console.log('获取微信支付信息失败');
						});
				});
			},

			// 视频目录切换开关
			onChange() {
				this.vDetails = !this.vDetails;
			},
			// 立即播放
			// startPlay() {
			// 	let arr = this.dataForm.video_list || [];
			// 	let obj = arr[0] || {};
			// 	let url = obj.url || '';
			// 	this.onLinVideoTo(url);
			// },
			// 点击观看目录视频
			onLinVideoTo(url) {
				if (!url) {
					this.$toast('未上传视频');
					return;
				}
				if (this.dataForm.order_count < 1) {
					//为0的时候是未购买
					this.$toast('视频未购买');
					return;
				}
				uniLinkTo(`/package/video/video-play/index?url=${url}`);
			},

			// 试看
			ontryIt(url) {
				if (!url) {
					this.$toast('未上传视频');
					return;
				}
				let params = {
					url, //视频地址
					duration: this.dataForm.try_time //试播时间秒为单位 1 = 1秒
				};

				uniLinkTo(`/package/video/video-play/index?url=${params.url}&duration=${params.duration}`);
			}
		}
	};
</script>

<style lang="scss">
	.video_img {
		width: 100%;
		height: 438rpx;
	}
	.show-img{
		width: 500rpx;
		height: 500rpx;
	}
	.video-title-price {
		width: 100%;
		height: 190rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background: #ffffff;
		border-bottom: 20rpx solid #f5f5f5;
	}

	.video-title {
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
	}

	.price-box {
		display: flex;
		align-items: center;
	}

	.video-price {
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #f82424;
	}

	.icon_stop {
		width: 34rpx;
		height: 34rpx;
		display: flex;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.icon_live {
		font-size: 38rpx;
		color: var(--color);
	}

	.video_details {
		padding: 0 20rpx;
	}

	.video-d-i {
		justify-content: space-between;
		height: 97rpx;
		line-height: 97rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.v-time {
		font-weight: 500;
		color: #999999;
	}

	.v-catalog {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 20rpx;
		height: 98rpx;
		background: #f7fcff;
	}

	.v-d-name {
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #333333;
	}

	.video-list {
		position: relative;
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
		margin: 20rpx 0 30rpx 0;
		padding: 0 40rpx;
		margin-bottom: 30rpx;
	}

	.video-list::before {
		content: '';
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		border-radius: 4rpx;
		height: 36rpx;
		background-color: #1aa3f6;
	}

	.v-catalog-item {
		padding: 0 20rpx;
	}

	.v-catalog-box {
		border-bottom: 20rpx solid #f5f5f5;
	}

	.v-catalog-content {
		transition: opacity 0.5s;
	}

	.bottom-box {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		height: 98rpx;
		background: #ffffff;
		border-top: 1rpx solid #f5f5f5;
		box-sizing: border-box;

		.flex-c-c {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bottom-box-item-left {
			flex: 1;
			color: #1aa3f6;
			height: 100%;

			&.has_play {
				background-color: #1aa3f6;
				color: #fff;
			}
		}

		.bottom-box-item-right {
			flex: 1;
			background-color: var(--color);
			color: #fff;
			height: 100%;
		}

		.cart_icon {
			width: 40rpx;
			height: 30rpx;
			margin-right: 10rpx;
			font-size: 40rpx;
		}

		.bottom-img {
			color: #fff;
			margin-right: 10rpx;
			font-size: 40rpx;
		}
	}

	.bottom-line {
		width: 100%;
		height: 100rpx;
	}
</style>
